<!DOCTYPE html>
<html>
<head>
    <title>模具和设备故障对比</title>
    #parse("sys/header.html")
    <style>
        #rrapp {
            width: 100%;
            height: 100%;
            padding: 5px;
        }
        .ivu-form-item {
            margin-bottom: 0px;
        }
        .main {
            padding: 10px;
            height: 50%;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            align-content: flex-start;
            overflow: auto;
            overflow-x: hidden;
        }
        .main .item{
            width: 50%;
            height: 100%;
        }
        .kpiCol {
            height: 550px;
            padding-right: 10px;
        }
    </style>
</head>
<body>
<div id="rrapp">
    <Card :padding=8>
        <Row :gutter="1" justify="center">
            <i-col span="4">
                <i-input v-model="q.devName" placeholder="请选择设备" readonly  icon="md-arrow-dropdown-circle" @on-click="getDeviceInfo"></i-input>
            </i-col>
            <i-col span="4">
                <Date-picker type="daterange" v-model="q.daterange" placeholder="请选择统计时间段"></Date-picker>
            </i-col>
            <i-col span="2">
                <i-button @click="loadAndRenderKpiView">生成报表</i-button>
            </i-col>
            <i-col span="2">
                <i-button @click="reset">重置</i-button>
            </i-col>
            </i-form>
        </Row>
        <Row :gutter="1" justify="center">
            <!-- KPI图表区域 -->
            <Card>
                <div id="main" class="kpiCol">故障时间分析对比</div>
            </Card>
        </Row>
        <Row :gutter="1" justify="center">
            <i-col span="12">
                <!-- 设备和模具运行、故障占比图表 -->
                <Card>
                    <p slot="title">时间占比综合图表</p>
                    <div id="faultContrast" class="kpiCol"></div>
                </Card>
            </i-col>
            <i-col span="11">
                <!-- KPI图表区域 -->
                <Card>
                    <p slot="title">故障时长详情</p>
                    <i-table highlight-row stripe border :columns="columns1" :data="faultDetailList"></i-table>
                </Card>
            </i-col>
        </Row>
    </Card>
</div>
</body>
<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script src="${rc.contextPath}/js/analyse/mold2DeviceFaultContract.js?_${date.systemTime}"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>-->
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>-->

</html>
